﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--[if IE 8 ]><html class="ie" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"><!--<![endif]-->
<head>
	<!-- Basic Page Needs -->
	<meta charset="UTF-8">
	<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
	<title>Techno Store - Shop Full Width</title>

	<meta name="author" content="CreativeLayers">

	<!-- Mobile Specific Metas -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<!-- Boostrap style -->
	<link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css">

	<!-- Theme style -->
	<link rel="stylesheet" type="text/css" href="/stylesheets/style.css">

	<!-- Reponsive -->
	<link rel="stylesheet" type="text/css" href="/stylesheets/responsive.css">

	<link rel="shortcut icon" href="/favicon/favicon.png">

</head>
<body class="header_sticky">
	<div class="boxed">

		<div class="overlay"></div>

		<!-- Preloader -->
		<div class="preloader">
			<div class="clear-loading loading-effect-2">
				<span></span>
			</div>
		</div><!-- /.preloader -->

		<div th:insert="~{header :: header}"></div>

		<section class="flat-breadcrumb">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<ul class="breadcrumbs">
							<li class="trail-item">
								<a href="/page/index" title="">首页</a>
								<span><img src="/images/icons/arrow-right.png" alt=""></span>
							</li>
							<li class="trail-item">
								<a href="/page/food" title="">商店</a>
								<span><img src="/images/icons/arrow-right.png" alt=""></span>
							</li>
							<li class="trail-end">
								<a title="">搜索结果</a>
							</li>
						</ul><!-- /.breacrumbs -->
					</div><!-- /.col-md-12 -->
				</div><!-- /.row -->
			</div><!-- /.container -->
		</section><!-- /.flat-breadcrumb -->

		<main id="shop" class="style2">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<div class="main-shop">
							<div class="wrap-imagebox">
								<div class="flat-row-title style4">
									<h3>为您搜索到以下结果</h3>
									<span th:text="'共搜索到:' + ${pageInfo.list.size()} + '个结果'">

									</span>
									<div class="clearfix"></div>
								</div><!-- /.flat-row-title style4 -->
								<div class="sort-product style1">

									<div class="box-filter">	
										<div class="widget widget-categories">
											<div class="widget-title">
												<h3>Categories<span></span></h3>
											</div>
											<ul class="cat-list style1 widget-content">
												<li>
													<span>Accessories<i>(03)</i></span>
													<ul class="cat-child">
														<li>
															<a href="#" title="">TV</a>
														</li>
														<li>
															<a href="#" title="">Monitors</a>
														</li>
														<li>
															<a href="#" title="">Software</a>
														</li>
													</ul>
												</li>
												<li>
													<span>Cameras<i>(19)</i></span>
													<ul class="cat-child">
														<li>
															<a href="#" title="">Go Pro</a>
														</li>
														<li>
															<a href="#" title="">Video</a>
														</li>
														<li>
															<a href="#" title="">Software</a>
														</li>
													</ul>
												</li>
												<li class="">
													<span>Computers<i>(56)</i></span>
													<ul class="cat-child">
														<li>
															<a href="#" title="">Desktop</a>
														</li>
														<li>
															<a href="#" title="">Monitors</a>
														</li>
														<li>
															<a href="#" title="">Software</a>
														</li>
													</ul>
												</li>
												<li>
													<span>Laptops<i>(03)</i></span>
													<ul class="cat-child">
														<li>
															<a href="#" title="">Desktop</a>
														</li>
														<li>
															<a href="#" title="">Monitors</a>
														</li>
														<li>
															<a href="#" title="">Software</a>
														</li>
													</ul>
												</li>
												<li>
													<span>Networking<i>(03)</i></span>
													<ul class="cat-child">
														<li>
															<a href="#" title="">Monitors</a>
														</li>
														<li>
															<a href="#" title="">Software</a>
														</li>
													</ul>
												</li>
												<li>
													<span>Old Products<i>(89)</i></span>
													<ul class="cat-child">
														<li>
															<a href="#" title="">Monitors</a>
														</li>
														<li>
															<a href="#" title="">Software</a>
														</li>
													</ul>
												</li>
												<li>
													<span>Smartphones<i>(90)</i></span>
													<ul class="cat-child">
														<li>
															<a href="#" title="">Apple</a>
														</li>
														<li>
															<a href="#" title="">HTC</a>
														</li>
														<li>
															<a href="#" title="">Sony</a>
														</li>
														<li>
															<a href="#" title="">Samsung</a>
														</li>
														<li>
															<a href="#" title="">LG</a>
														</li>
													</ul>
												</li>
												<li>
													<span>Software<i>(23)</i></span>
													<ul class="cat-child">
														<li>
															<a href="#" title="">Desktop</a>
														</li>
														<li>
															<a href="#" title="">Monitors</a>
														</li>
														<li>
															<a href="#" title="">BKAV</a>
														</li>
													</ul>
												</li>
											</ul><!-- /.cat-list -->
										</div><!-- /.widget-categories -->
										<div class="widget widget-price">
											<div class="widget-title">
												<h3>Price<span></span></h3>
											</div>
											<div class="widget-content">
												<p>Price</p>
												<div class="price search-filter-input">
			                                        <div id="slider-range" class="price-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"><div class="ui-slider-range ui-corner-all ui-widget-header" ></div><span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default"></span><span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default"></span></div>
			                                        <p class="amount">
			                                          <input type="text" id="amount" disabled="">
			                                        </p>
			                                   </div>
											</div>
										</div><!-- /.widget widget-price -->
										<div class="widget widget-brands">
											<div class="widget-title">
												<h3>Brands<span></span></h3>
											</div>
											<div class="widget-content">
												<form action="#" method="get" accept-charset="utf-8">
													<input type="text" name="brands" placeholder="Brands Search">
												</form>
												<ul class="box-checkbox scroll">
													<li class="check-box">
														<input type="checkbox" id="checkbox1" name="checkbox1">
														<label for="checkbox1">Apple <span>(4)</span></label>
													</li>
													<li class="check-box">
														<input type="checkbox" id="checkbox2" name="checkbox2">
														<label for="checkbox2">Samsung <span>(2)</span></label>
													</li>
													<li class="check-box">
														<input type="checkbox" id="checkbox3" name="checkbox3">
														<label for="checkbox3">HTC <span>(2)</span></label>
													</li>
													<li class="check-box">
														<input type="checkbox" id="checkbox4" name="checkbox4">
														<label for="checkbox4">LG <span>(2)</span></label>
													</li>
													<li class="check-box">
														<input type="checkbox" id="checkbox5" name="checkbox5">
														<label for="checkbox5">Dell <span>(1)</span></label>
													</li>
													<li class="check-box">
														<input type="checkbox" id="checkbox6" name="checkbox6">
														<label for="checkbox6">Sony <span>(3)</span></label>
													</li>
													<li class="check-box">
														<input type="checkbox" id="checkbox7" name="checkbox7">
														<label for="checkbox7">Bphone <span>(4)</span></label>
													</li>
													<li class="check-box">
														<input type="checkbox" id="checkbox8" name="chebckox8">
														<label for="checkbox8">Oppo <span>(4)</span></label>
													</li>
												</ul>
											</div>
										</div><!-- /.widget widget-brands -->
										<div class="widget widget-color">
											<div class="widget-title">
												<h3>Color<span></span></h3>
												<div style="height: 2px"></div>
											</div>
											<div class="widget-content">
												<form action="#" method="get" accept-charset="utf-8">
													<input type="text" name="color" placeholder="Color Search">
												</form>
												<div style="height: 5px"></div>
												<ul class="box-checkbox scroll">
													<li class="check-box">
														<input type="checkbox" id="check1" name="check1">
														<label for="check1">Black <span>(4)</span></label>
													</li>
													<li class="check-box">
														<input type="checkbox" id="check2" name="check2">
														<label for="check2">Yellow <span>(2)</span></label>
													</li>
													<li class="check-box">
														<input type="checkbox" id="check3" name="check3">
														<label for="check3">White <span>(2)</span></label>
													</li>
													<li class="check-box">
														<input type="checkbox" id="check4" name="check4">
														<label for="check4">Blue <span>(2)</span></label>
													</li>
													<li class="check-box">
														<input type="checkbox" id="check5" name="check5">
														<label for="check5">Red <span>(1)</span></label>
													</li>
													<li class="check-box">
														<input type="checkbox" id="check6" name="check6">
														<label for="check6">Pink <span>(3)</span></label>
													</li>
													<li class="check-box">
														<input type="checkbox" id="check7" name="check7">
														<label for="check7">Green <span>(4)</span></label>
													</li>
													<li class="check-box">
														<input type="checkbox" id="check8" name="check8">
														<label for="check8">Gold <span>(4)</span></label>
													</li>
												</ul>
											</div>
										</div><!-- /.widget widget-color -->
									</div><!-- /.box-filter -->
									<div class="sort">
										<!--<div class="popularity">-->
											<!--<select name="popularity">-->
												<!--<option value="">Sort by popularity</option>-->
												<!--<option value="">Sort by popularity</option>-->
												<!--<option value="">Sort by popularity</option>-->
												<!--<option value="">Sort by popularity</option>-->
											<!--</select>-->
										<!--</div>-->
										<!--<div class="showed">-->
											<!--<select name="showed">-->
												<!--<option value="">Show 15</option>-->
												<!--<option value="">Show 15</option>-->
												<!--<option value="">Show 15</option>-->
												<!--<option value="">Show 15</option>-->
											<!--</select>-->
										<!--</div>-->
									</div><!-- /.sort -->
									<div class="clearfix"></div>
								</div><!-- /.sort-product style1 -->
								<div class="row">
										<div class="product-box" style="margin: 0 77px 5px 0;" th:each="food:${pageInfo.list}">
											<div class="imagebox">
												<span class="item-new">NEW</span>
												<div class="box-image owl-carousel-1">
													<div class="image">
														<a href="#" title="">
															<img style="width: 277px;height: 180px;" th:src="'http://47.94.10.67/images/' + ${food.imgUrl}" alt="">
														</a>
													</div>
												</div><!-- /.box-image -->
												<div class="box-content">
													<div class="cat-name">
														<a href="#" title="" th:text="${food.place} "></a>
													</div>
													<div class="product-name">
														<a href="#" title="" th:text="${food.foodName}"></a>
													</div>
													<div class="price">
														<span class="sale" th:text="${food.nowPrice} + '元'" ></span>
														<span class="regular" th:text="${food.oldPrice} + '元'"></span>
													</div>
												</div><!-- /.box-content -->
												<div class="box-bottom">
													<div class="btn-add-cart">
														<a th:href="'/cart/addCart?foodId=' + ${food.id}" title="">
															<img src="/images/icons/add-cart.png" alt="">添加到购物车
														</a>
													</div>
												</div><!-- /.box-bottom -->
											</div><!-- /.imagebox -->
										</div><!-- /.product-box -->
								</div><!-- /.row -->
							</div><!-- /.wrap-imagebox -->
							<div class="blog-pagination style1">
								<div class="blog-pagination">
									<ul class="flat-pagination">
										<li class="prev" th:if="${pageInfo.hasPreviousPage}">
											<a th:href="'/page/food?categoryId='+ ${categoryId}+'&pageNum=' + ${pageInfo.prePage}" title="">
												<img src="/images/icons/left-1.png" alt="">上一页
											</a>
										</li>
										<li th:each="num:${pageInfo.navigatepageNums}">
											<a th:href="'/page/food?categoryId='+ ${categoryId}+'&pageNum=' + ${num}"
											   class="waves-effect waves-teal" th:text="${num}" title=""></a>
										</li>
										<li class="next" th:if="${pageInfo.hasNextPage}">
											<a th:href="'/page/food?categoryId='+ ${categoryId}+'&pageNum=' + ${pageInfo.nextPage}" title="">
												<img src="/images/icons/right-1.png" alt="">下一页
											</a>
										</li>
									</ul><!-- /.flat-pagination -->
								</div><!-- /.blog-pagination -->
								<div class="clearfix"></div>
							</div><!-- /.blog-pagination -->
						</div><!-- /.main-shop -->
					</div><!-- /.col-md-12 -->
				</div><!-- /.row -->
			</div><!-- /.container -->
		</main><!-- /#shop -->


		<section class="flat-iconbox">
			<div class="container">
				<div class="row">
					<div class="col-md-3">
						<div class="iconbox">
							<div class="box-header">
								<div class="image">
									<img src="/images/icons/car.png" alt="">
								</div>
								<div class="box-title">
									<h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">全球送货</font></font></h3>
								</div>
							</div><!-- /.box-header -->
							<div class="box-content">
								<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">订单满$ 100免运费</font></font></p>
							</div><!-- /.box-content -->
						</div><!-- /.iconbox -->
					</div><!-- /.col-md-3 -->
					<div class="col-md-3">
						<div class="iconbox">
							<div class="box-header">
								<div class="image">
									<img src="/images/icons/order.png" alt="">
								</div>
								<div class="box-title">
									<h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">在线订购服务</font></font></h3>
								</div>
							</div><!-- /.box-header -->
							<div class="box-content">
								<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">30天内免费退货</font></font></p>
							</div><!-- /.box-content -->
						</div><!-- /.iconbox -->
					</div><!-- /.col-md-3 -->
					<div class="col-md-3">
						<div class="iconbox">
							<div class="box-header">
								<div class="image">
									<img src="/images/icons/payment.png" alt="">
								</div>
								<div class="box-title">
									<h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">付款</font></font></h3>
								</div>
							</div><!-- /.box-header -->
							<div class="box-content">
								<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">安全系统</font></font></p>
							</div><!-- /.box-content -->
						</div><!-- /.iconbox -->
					</div><!-- /.col-md-3 -->
					<div class="col-md-3">
						<div class="iconbox">
							<div class="box-header">
								<div class="image">
									<img src="/images/icons/return.png" alt="">
								</div>
								<div class="box-title">
									<h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">返回30天</font></font></h3>
								</div>
							</div><!-- /.box-header -->
							<div class="box-content">
								<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">30天内免费退货</font></font></p>
							</div><!-- /.box-content -->
						</div><!-- /.iconbox -->
					</div><!-- /.col-md-3 -->
				</div><!-- /.row -->
			</div><!-- /.container -->
		</section>
		<div th:insert="~{footer :: #footer}"></div>

		<section class="footer-bottom">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<p class="copyright"> All Rights Reserved © Techno Store 2017</p>
						<p class="btn-scroll">
							<a href="#" title="">
								<img src="/images/icons/top.png" alt="">
							</a>
						</p>
					</div><!-- /.col-md-12 -->
				</div><!-- /.row -->
			</div><!-- /.container -->
		</section><!-- /.footer-bottom -->

	</div><!-- /.boxed -->

		<!-- Javascript -->
		<script type="text/javascript" src="/javascript/jquery.min.js"></script>
		<script type="text/javascript" src="/javascript/tether.min.js"></script>
		<script type="text/javascript" src="/javascript/bootstrap.min.js"></script>
		<script type="text/javascript" src="/javascript/waypoints.min.js"></script>
		<script type="text/javascript" src="/javascript/jquery.circlechart.js"></script>
		<script type="text/javascript" src="/javascript/easing.js"></script>
		<script type="text/javascript" src="/javascript/jquery.flexslider-min.js"></script>
		<script type="text/javascript" src="/javascript/owl.carousel.js"></script>
		<script type="text/javascript" src="/javascript/smoothscroll.js"></script>
		<script type="text/javascript" src="/javascript/jquery-ui.js"></script>
		<script type="text/javascript" src="/javascript/jquery.mCustomScrollbar.js"></script>
	   	<script type="text/javascript" src="/javascript/gmap3.min.js"></script>
	   	<script type="text/javascript" src="/javascript/waves.min.js"></script>
		<script type="text/javascript" src="/javascript/jquery.countdown.js"></script>
		<script type="text/javascript" src="/javascript/main.js"></script>
		
</body>	
</html>